<template>
	<div>
		<div class="tabs rowSC mb-1 ml-3">
			<a v-for="item in tabsList" :key="item.key"
				:style="{ background: tabsCurrent === item.key ? '#1F6FE4' : '#1a3d83' }" @click="tabsChange(item.key)">{{
					item.name }}</a>
		</div>
		<div class="rowSC echart">
			<a class="mr-1 ml-1">进站统计</a>
			<div ref="main" style="width: 25em; height: 8.125em"></div>
		</div>
		<div class="rowSC echart">
			<a class="mr-1 ml-1">出站统计</a>
			<div ref="main1" style="width: 25em; height: 8.125em"></div>
		</div>
		<div class="tags rowCC">
			<div class="rowCC item" v-for="(item, index) in tabsCurrent === 0 ? tagList : tagList1" :key="index">
				<div class="tag" :style="{ background: item.color }"></div>
				{{ item.name }}
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted, shallowRef, reactive, watch, computed } from 'vue';
import { getRubbish } from '@/api/RoadGate';
import { useStore } from 'vuex';
import * as echarts from 'echarts';

// const props: any = defineProps({
// 	echartData: Object,
// 	isTag: Boolean
// })
const store = useStore();
const main = ref<any>(null);
const myChart = shallowRef();
const main1 = ref<any>(null);
const myChart1 = shallowRef();
const tagList = reactive<any>([
	{
		name: '今日其他垃圾',
		color: '#86afec'
	},
	{
		name: '今日厨余垃圾',
		color: '#76dc52'
	},
	{
		name: '今日大件垃圾',
		color: '#ff9800'
	},
	{
		name: '昨日其他垃圾',
		color: '#1c86b8'
	},
	{
		name: '昨日厨余垃圾',
		color: '#257651'
	},
	{
		name: '昨日大件垃圾',
		color: '#844d00'
	}
]);

const tagList1 = reactive<any>([
	{
		name: '本月其他垃圾',
		color: '#86afec'
	},
	{
		name: '本月厨余垃圾',
		color: '#76dc52'
	},
	{
		name: '本月大件垃圾',
		color: '#ff9800'
	},
	{
		name: '上月其他垃圾',
		color: '#1c86b8'
	},
	{
		name: '上月厨余垃圾',
		color: '#257651'
	},
	{
		name: '上月大件垃圾',
		color: '#844d00'
	}
]);

const tabsCurrent = ref(0);
const yData = ['大件垃圾', '厨余垃圾', '其他垃圾'];

const structure = {
	inEchartData: {
		oneParams: [],
		twoParams: []
	},
	outEchartData: {
		oneParams: [],
		twoParams: []
	}
};

const tabsList = ref<any>([
	{
		name: '日统计',
		key: 0,
		...structure
	},
	{
		name: '月统计',
		key: 1,
		...structure
	}
]);

const tabsChange = (e: number) => {
	tabsCurrent.value = e;
	chartInit(myChart.value, tabsList.value[tabsCurrent.value].inEchartData);
	chartInit(myChart1.value, tabsList.value[tabsCurrent.value].outEchartData);
	// console.log('inEchartData', tabsList.value[tabsCurrent.value].inEchartData)
	// console.log('outEchartData', tabsList.value[tabsCurrent.value].outEchartData)
};

const init = async () => {
	const res = await getRubbish({ site: window.site });
	const data = res.data.result;
	// console.log('进出站垃圾数据统计', data)
	// 进站统计
	if (data && data.getInMap) {
		tabsList.value[0].inEchartData.oneParams = data.getInMap.getInTodayList;
		tabsList.value[0].inEchartData.twoParams = data.getInMap.getInYesterdayList;
		tabsList.value[1].inEchartData.oneParams = data.getInMap.getInMonthList;
		tabsList.value[1].inEchartData.twoParams = data.getInMap.getInLastMonthList;
	}
	// 出站统计
	if (data && data.outboundMap) {
		tabsList.value[0].outEchartData.oneParams = data.outboundMap.outboundTodayList;
		tabsList.value[0].outEchartData.twoParams = data.outboundMap.outboundYesterdayList;
		tabsList.value[1].outEchartData.oneParams = data.outboundMap.outboundMonthList;
		tabsList.value[1].outEchartData.twoParams = data.outboundMap.outboundLastMonthList;
	}
	chartInit(myChart.value, tabsList.value[tabsCurrent.value].inEchartData);
	chartInit(myChart1.value, tabsList.value[tabsCurrent.value].outEchartData);
};

onMounted(() => {
	myChart.value = echarts.init(main.value);
	myChart1.value = echarts.init(main1.value);
});

const refresh = computed(() => store.state.refresh); // 当前故障状态
watch(
	refresh,
	() => {
		init();
	},
	{
		immediate: true
	}
);

const chartInit = (myChart: any, echartData: any) => {
	let colorList1 = ['#ff9800', '#76dc52', '#86afec'];
	let colorList2 = ['#844d00', '#257651', '#1c86b8'];
	let colors = [
		new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			{
				offset: 1,
				color: '#30dcf3'
			},
			{
				offset: 0,
				color: '#07304c'
			}
		]),
		new echarts.graphic.LinearGradient(0, 1, 0, 0, [
			{
				offset: 1,
				color: '#ffead1'
			},
			{
				offset: 0,
				color: '#3b3b4a'
			}
		])
	];
	// 绘制图表
	myChart.setOption({
		// backgroundColor: '#05112c',
		color: ['#30dcf3', '#e7c59c', '#ffff00', '#ffaa7f', '#00ff00', '#5555ff'],
		tooltip: {
			trigger: 'axis',
			axisPointer: {
				type: 'shadow'
			},
			backgroundColor: 'rgba(0,50,99,0.65)',
			borderColor: 'rgba(0,129,255,1)',
			textStyle: {
				color: '#fff',
				fontSize: '0.7em',
				fontFamily: 'SourceHanSansCN'
			}
		},
		grid: {
			left: '8%',
			right: '10%',
			bottom: '-1%',
			top: '5%',
			containLabel: true
		},
		yAxis: [
			{
				type: 'category',
				data: yData,
				axisTick: {
					show: false
				},
				axisLine: {
					lineStyle: {
						color: '#fff'
					}
				},
				axisLabel: {
					textStyle: {
						color: '#fff'
					},
					formatter: function (
						value: any //X轴的内容
					) {
						var ret = ''; //拼接加\n返回的类目项
						var max = 2; //每行显示的文字字数
						var val = value.length; //X轴内容的文字字数
						var rowN = Math.ceil(val / max); //需要换的行数
						// if (rowN > 1) {
						// 	//判断 如果字数大于2就换行
						// 	for (var i = 0; i < rowN; i++) {
						// 		var temp = ''; //每次截取的字符串
						// 		var start = i * max; //开始截取的位置
						// 		var end = start + max; //结束截取的位置
						// 		temp = value.substring(start, end) + '\n';
						// 		ret += temp; //最终的字符串
						// 	}
						// 	return ret;
						// } else {
						// 	return value;
						// }
						return value;
					},
					color: '#fff',
					fontSize: '0.7em',
					fontFamily: 'SourceHanSansCN',
					interval: 0
				}
			}
		],
		xAxis: [
			{
				type: 'value',
				show: false,
				nameTextStyle: {
					color: '#fff',
					fontSize: '0.7em',
					fontFamily: 'SourceHanSansCN'
				},

				splitLine: {
					show: false,
					lineStyle: {
						type: 'dashed',
						color: '#fff'
					}
				},
				axisLine: {
					show: false,
					lineStyle: {
						color: '#fff'
					}
				},
				axisLabel: {
					color: '#fff',
					fontSize: '0.7em',
					fontFamily: 'SourceHanSansCN'
				}
			}
		],
		series: [
			{
				name: `${tabsCurrent.value == 0 ? '今日' : '本月'}`,
				type: 'bar',
				barWidth: '18em',
				// color: colors[0],
				label: {
					show: false,
					color: '#fff',
					fontWeight: 300,
					position: 'top'
				},
				data: echartData.oneParams.map((c: any) => {
					return c.number;
				}),
				itemStyle: {
					normal: {
						//每个柱子的颜色即为colors数组里的每一项，如果柱子数目多于colors的长度，则柱子颜色循环使用该数组
						color: function (params: any) {
							return colorList1[params.dataIndex];
						},
						label: {
							show: true, //开启显示
							position: 'center', //在上方显示
							textStyle: {
								//数值样式
								color: '#fff',
								fontSize: '0.7em',
								padding: [6, 0, 0, 5]
							},
							formatter: function (params: any) {
								// console.log('params', params.data)
								let str =
									params.data != 0
										? `驳运投放 ${params.data} 次　　　${echartData.twoParams[params.dataIndex].weight} ${echartData.twoParams[params.dataIndex].unit}`
										: params.data;
								return str;
							}
						}
					}
				}
			},
			{
				name: `${tabsCurrent.value == 0 ? '昨日' : '上月'}`,
				type: 'bar',
				barWidth: '18em',
				// color: colors[1],
				label: {
					show: false,
					color: '#fff',
					fontWeight: 300,
					position: 'top'
				},
				data: echartData.twoParams.map((c: any) => {
					return c.number;
				}),
				itemStyle: {
					normal: {
						color: function (params: any) {
							return colorList2[params.dataIndex];
						},
						label: {
							show: true, //开启显示
							position: 'center', //在上方显示
							textStyle: {
								//数值样式
								color: '#fff',
								fontSize: '0.7em',
								padding: [6, 0, 0, 5]
							},
							formatter: function (params: any) {
								// console.log('params', params.data)
								let str =
									params.data != 0
										? `驳运投放 ${params.data} 次　　　${echartData.twoParams[params.dataIndex].weight} ${echartData.twoParams[params.dataIndex].unit}`
										: params.data;
								return str;
							}
						}
					}
				}
			}
		]
	});
};
</script>

<style lang="scss" scoped>
.tags {
	flex-flow: wrap;

	.item {
		font-size: 0.7em;
		width: 30%;
	}

	.tag {
		width: 1em;
		height: 1em;
		border-radius: 0.3em;
		margin-right: 0.3125em;
	}
}

.echart {
	a {
		writing-mode: vertical-rl;
		background: #1f6fe4;
		border-radius: 0.3em;
		padding: 0.3125em 0.2125em;
		color: #ffff00;
	}
}

.tabs {
	a {
		border-radius: 0.3em;
		padding: 0.2em 0.6em;
		margin: 0.1em 0.3em;
		font-size: 0.9em;
	}
}
</style>